<template>
  <div class="wrapper">
    <div 
      class="icon"
      v-for="item of iconList"
      :key="item.id"
      >
      <div class="icon-img">
        <img 
        class="img" 
        :src="item.imgUrl"
        :class="[item.color]"
        >
      </div>
      <div class="icon-desc">{{item.desc}}</div>   
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'homeCatalog',
  props:{
    iconList:Array
  },
  data(){
    return {
      green:'green',
      blue:'blue',
      pink:'pink',
      orange:'orange',
    }
  }
  
}
</script>

<style lang="stylus" scoped>
.wrapper
  padding-top:.2rem
  .icon
    width:25%
    float:left
    .img
      display:block
      border-radius:1rem
      margin:0 auto
      width:50%
    .green
      background:#67BB0F;
    .blue
      background:#37A3F5;
    .pink
      background:#FF7064;
    .orange
      background:#FFA51E;
    .icon-desc
      text-align:center
      padding-top:.2rem
      padding-bottom:.5rem
    
</style>
